import React from 'react'
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Alert
} from 'react-native'

import { GiftedChat, Actions, Bubble } from 'react-native-gifted-chat'
import CustomActions from './customActions'
import CustomView from './customView'

import styleUtils from '../../Styles'
import NavbarComp from '../../Components/NavBar'

export default class MessageView extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            messages: [],
            loadEarlier: true,
            typingText: null,
            isLoadingEarlier: false,
        }

        this._isMounted = false
        this.onSend = this.onSend.bind(this)
        this.onReceive = this.onReceive.bind(this)
        this.renderCustomActions = this.renderCustomActions.bind(this)
        this.renderBubble = this.renderBubble.bind(this)
        this.renderFooter = this.renderFooter.bind(this)
        this.onLoadEarlier = this.onLoadEarlier.bind(this)

        this._isAlright = null
    }

    componentWillMount() {
        this._isMounted = true
        this.setState(() => {
            return {
                messages: require('../../Mock/message'),
            }
        })
    }

    componentWillUnmount() {
        this._isMounted = false
    }

    onLoadEarlier() {
        this.setState(previousState => {
            return {
                isLoadingEarlier: true,
            }
        })

        setTimeout(() => {
            if (this._isMounted === true) {
                this.setState(previousState => {
                    return {
                        messages: GiftedChat.prepend(previousState.messages, require('../../Mock/earlierMessage')),
                        loadEarlier: false,
                        isLoadingEarlier: false,
                    }
                })
            }
        }, 1000) // simulating network
    }

    onSend(messages = []) {
        this.setState(previousState => {
            return {
                messages: GiftedChat.append(previousState.messages, messages),
            }
        })

        // for demo purpose
        this.answerDemo(messages)
    }

    answerDemo(messages) {
        if (messages.length > 0) {
            if ((messages[0].image || messages[0].location) || !this._isAlright) {
                this.setState(previousState => {
                    return {
                        typingText: 'React Native is typing'
                    }
                })
            }
        }

        setTimeout(() => {
            if (this._isMounted === true) {
                if (messages.length > 0) {
                    if (messages[0].image) {
                        this.onReceive('Nice picture!')
                    } else if (messages[0].location) {
                        this.onReceive('My favorite place')
                    } else {
                        if (!this._isAlright) {
                            this._isAlright = true
                            this.onReceive('Alright')
                        }
                    }
                }
            }

            this.setState(previousState => {
                return {
                    typingText: null,
                }
            })
        }, 1000)
    }

    onReceive(text) {
        this.setState(previousState => {
            return {
                messages: GiftedChat.append(previousState.messages, {
                    _id: Math.round(Math.random() * 1000000),
                    text: text,
                    createdAt: new Date(),
                    user: {
                        _id: 2,
                        name: 'React Native',
                        avatar: 'https://facebook.github.io/react/img/logo_og.png',
                    },
                }),
            }
        })
    }

    renderCustomActions(props) {
        if (Platform.OS === 'ios') {
            return (
                <CustomActions
                    {...props}
                    />
            )
        }
        const options = {
            'Action 1': props => {
                Alert('option 1')
            },
            'Action 2': props => {
                Alert('option 2')
            },
            'Cancel': () => { },
        }
        return (
            <Actions
                {...props}
                options={options}
                />
        )
    }

    renderBubble(props) {
        return (
            <Bubble
                {...props}
                wrapperStyle={{
                    left: {
                        backgroundColor: '#f0f0f0',
                    }
                }}
                />
        )
    }

    renderCustomView(props) {
        return (
            <CustomView
                {...props}
                />
        )
    }

    renderFooter(props) {
        if (this.state.typingText) {
            return (
                <View style={styles.footerContainer}>
                    <Text style={styles.footerText}>
                        {this.state.typingText}
                    </Text>
                </View>
            )
        }
        return null
    }

    render() {
        return (
            <View style={[styles.container, styleUtils.containerShadow]}>
                <NavbarComp route={this.props.route} navigator={this.props.navigator}/> 
                <GiftedChat
                    messages={this.state.messages}
                    onSend={this.onSend}
                    loadEarlier={this.state.loadEarlier}
                    onLoadEarlier={this.onLoadEarlier}
                    isLoadingEarlier={this.state.isLoadingEarlier}

                    user={{
                        _id: 1, // sent messages should have same user._id
                    }}

                    renderActions={this.renderCustomActions}
                    renderBubble={this.renderBubble}
                    renderCustomView={this.renderCustomView}
                    renderFooter={this.renderFooter}
                    />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexGrow: 1
    },
    footerContainer: {
        marginTop: 5,
        marginLeft: 10,
        marginRight: 10,
        marginBottom: 10,
    },
    footerText: {
        fontSize: 14,
        color: '#aaa',
    },
})